<template>
    <div>
        <h1>Setup component</h1>
        <h1>{{ message }}</h1>
    </div>
</template>

<script lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
    setup(props, ctx) {
        console.log("🚀 ~ setup ~ ctx:", ctx)
        console.log("🚀 ~ setup ~ props:", props)
        const message = ref('Vi');

        onBeforeMount(() => {
            console.log('onBeforeMount 11111111111111');
            message.value = 'Before Mount';
        });

        onMounted(() => {
            console.log('onMounted 2222222222222');
            message.value = 'Mounted';
        });

        onBeforeUpdate(() => {
            console.log('onBeforeUpdate 33333333333333 ');
        });

        onUpdated(() => {
            console.log('onUpdated 44444444444444444');
        });

        onBeforeUnmount(() => {
            console.log('onBeforeUnmount 555555555555555');
        });

        onUnmounted(() => {
            console.log('onUnmounted 666666666666666666');
        });

        return {
            message
        };
    }
}
</script>